<template>
  <div class="user-info">
    <div class="user-info-left">
      <div class="user-info-left-img"><img :src="urlResource + userInfo.avatarUrl" alt="" /></div>
      <div class="user-info-left-info">
        <p class="name">
          <span class="name-text">{{ userInfo.name }}</span>
          <span class="name-self" v-if="userId === userInfo.id">自己</span>
        </p>
        <p class="zz">
          <el-icon><SvgIcon name="gongsixinxi" /></el-icon>
          <span v-if="userInfo.companyModel && userInfo.companyModel.name">
            <!-- <i>
              <s>{{ userInfo.companyModel.name }}</s>
              <el-icon><ArrowRight /></el-icon>
            </i> -->
            <i v-for="(item, index) in userInfo.departmentModelList" :key="'departmentModelList' + index">
              <s>{{ item.name }}</s>
              <el-icon v-if="index != userInfo.departmentModelList.length - 1"><ArrowRight /></el-icon>
            </i>
          </span>
          <span v-else>--</span>
        </p>
        <p class="dh">
          <span v-auth="'phone'">
            <el-icon><SvgIcon name="shouji" /></el-icon>
            <span class="sj-wrap">
              <i class="sj-btn" v-if="!userInfo.mobile" @click="getMobileHandler">点击查看手机号</i>
              <i class="sj-default" v-else>{{ userInfo.mobile ? userInfo.mobile : "--" }}</i>
            </span>
          </span>
          <span>
            <el-icon><SvgIcon name="youxiang" /></el-icon>
            <i>{{ userInfo.email ? userInfo.email : "--" }}</i>
          </span>
        </p>
      </div>
    </div>
    <div class="user-option">
      <ul class="option-tj">
        <li>
          <span>{{ total.finishedTask }}</span>
          <span>已完成</span>
        </li>
        <li>
          <span>{{ total.unfinishedTask }}</span>
          <span>未完成</span>
        </li>
        <li>
          <span>{{ total.delayedTask }}</span>
          <span>延期</span>
        </li>
      </ul>
      <div class="user-option-bottom">
        <el-button v-show="false" type="primary" :icon="Plus" @click="addTaskFn">任务</el-button>
        <!-- <el-button type="primary" :icon="Edit">编辑</el-button> -->
      </div>
    </div>
  </div>
  <div v-if="drawerVisible">
    <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" :project-id="projectId" @change="refresh">
      <template #userId="">
        <UpDate class="common-tr" type="dropdown" :config="userConfigTask">
          <template #default="scp">
            <span class="flag">
              <img v-if="scp.scope" :src="urlResource + userInfos(scp.scope).avatarUrl" />
              <div class="user-default" v-else>
                <el-icon><User /></el-icon>
              </div>
            </span>
            <span class="user" v-if="scp.scope"> {{ userInfos(scp.scope) ? userInfos(scp.scope).name : "--" }}</span>
          </template>
          <!-- <el-icon class="icon"><ArrowDown /></el-icon> -->
        </UpDate>
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed, unref, onUnmounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import mittBus from "@/utils/mittBus";
import { useDict } from "@/hooks/useDict";
import { useUserStore } from "@/stores/modules/user";
import Dialog from "@/components/DialogForm/index.vue";
import UpDate from "@/views/project-Deprecated/components/UpDate/index.vue";
import { getMobileByUserId } from "@/api/modules/sys";

// api
import { getUserById, getListAllUser } from "@/api/modules/sys";
import { addProjectTask, getProjectPage } from "@/api/modules/project";
// hook
const { getDict } = useDict(["projectStage", "taskPriorityId", "taskStatus"]);
// 变量
let userInfo = ref({});
const listAllUser = ref<any>([]);
const userStore = useUserStore();
const urlResource = window?.staticConfig.urlResource;
const userId = computed(() => userStore.userInfo.id);
const total = ref({});

let projectListParams = ref({
  currentPage: 1,
  pageSize: 1000,
  userId: "",
  searchKey: ""
});
let projectList: Project.ResProjectData = ref([]);
let drawerVisible = ref(false);
let config = ref<any>({
  width: 40
});
// computed
const userInfos = computed(() => id => {
  return listAllUser.value.find(item => item.id == id);
});
/**task */
const userConfigTask = computed(() => {
  return {
    data: { userId: userInfo.value.id },
    other: { options: listAllUser.value },
    style: { height: 250 },
    key: "userId",
    initCallback: data => {
      config.value.form.formData.userId = unref(data).userId;
      config.value.form.formData.userName = userInfos.value(unref(data).userId).name;
    },
    successCallback: data => {
      config.value.form.formData.userId = unref(data).userId;
      config.value.form.formData.userName = userInfos.value(unref(data).userId).name;
    }
  };
});
// 方法
const getMobileHandler = async () => {
  const { data } = await getMobileByUserId({ id: userInfo.value.id });
  userInfo.value.mobile = data.mobile;
};

const refresh = () => {
  mittBus.emit("UserIdEmit", userInfo.value.id);
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};
const getProjectPageFn = async () => {
  try {
    const { data } = await getProjectPage(projectListParams.value);
    projectList.value = data.records || [];
  } catch (error) {
    console.log(error);
  }
};
const addTaskFn = async () => {
  await getProjectPageFn();
  drawerVisible.value = true;
  config.value.title = "新建任务";
  config.value.form = {
    formData: {
      projectId: "",
      name: "",
      userId: "",
      userName: "",
      priorityId: "",
      planStartTime: "",
      planEndTime: "",
      description: "",
      stageId: "",
      status: ""
    },
    rules: {
      name: [{ required: true, message: "请填写任务名称" }],
      userId: [{ required: true, message: "请选择任务负责人" }],
      planStartTime: [{ required: true, message: "请选择计划开始时间" }],
      planEndTime: [{ required: true, message: "请选择计划结束时间" }],
      projectId: [{ required: true, message: "请选择项目" }],
      priorityId: [{ required: true, message: "请选择优先级" }],
      stageId: [{ required: true, message: "请选择项目阶段" }],
      status: [{ required: true, message: "请选择任务状态" }]
    }
  };
  config.value.column = [
    {
      type: "select",
      key: "projectId",
      formItemAttribute: {
        label: "项目"
      },
      attributes: {
        placeholder: "请选择项目",
        options: projectList.value,
        multiple: false,
        filterable: true,
        clearable: true,
        disabled: false
      }
    },
    {
      type: "input",
      key: "name",
      formItemAttribute: {
        label: "任务标题"
      },
      attributes: {
        placeholder: "请填写任务标题"
      }
    },
    {
      type: "select",
      key: "status",
      formItemAttribute: {
        label: "任务状态"
      },
      attributes: {
        placeholder: "请选择任务状态",
        options: getDict("taskStatus"),
        multiple: false,
        filterable: true,
        clearable: true
      }
    },
    {
      type: "group",
      title: "",
      direction: "",
      list: [
        {
          type: "select",
          key: "stageId",
          formItemAttribute: {
            label: "项目阶段"
          },
          attributes: {
            placeholder: "请选择项目阶段",
            options: getDict("projectStage"),
            multiple: false,
            filterable: true,
            clearable: true
          }
        },
        {
          type: "select",
          key: "priorityId",
          formItemAttribute: {
            label: "优先级"
          },
          attributes: {
            placeholder: "请选择优先级",
            options: getDict("taskPriorityId"),
            multiple: false,
            filterable: true,
            clearable: true
          }
        }
      ]
    },
    {
      type: "group",
      title: "",
      direction: "",
      list: [
        {
          type: "date-picker",
          key: "planStartTime",
          formItemAttribute: {
            label: "计划开始时间"
          },
          attributes: {
            placeholder: "请选择计划开始时间",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        },
        {
          type: "date-picker",
          key: "planEndTime",
          formItemAttribute: {
            label: "计划完成时间"
          },
          attributes: {
            placeholder: "请选择计划完成时间",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        }
      ]
    },
    {
      type: "slot",
      key: "userId",
      formItemAttribute: {
        label: "任务负责人"
      },
      attributes: {}
    },
    {
      type: "input",
      key: "description",
      formItemAttribute: {
        label: "任务描述"
      },
      attributes: {
        placeholder: "请填写任务描述",
        type: "textarea"
      }
    }
  ];
  config.value.api = addProjectTask;
  config.value.message = "添加成功";
};
onMounted(() => {
  getListAllUserFn();
});
mittBus.on("UserIdEmit", async userId => {
  const { data } = await getUserById({ id: userId });
  userInfo.value = data;
});
mittBus.on("totalEmit", data => {
  total.value = data;
});
onUnmounted(() => {
  mittBus.off("UserIdEmit");
  mittBus.off("totalEmit");
});
</script>
<style lang="scss" scoped>
li,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
p {
  padding: 0;
  margin: 0;
}
i {
  font-style: normal;
}
s {
  text-decoration: none;
}
.user-info {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 20px 30px 0;
}
.user-info-left {
  display: flex;
  .user-info-left-img {
    width: 72px;
    height: 72px;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .user-info-left-info {
    .name {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .name-text {
        margin-right: 10px;
        font-size: 24px;
        color: #333333;
      }
      .name-self {
        width: 64px;
        height: 22px;
        font-size: 12px;
        line-height: 22px;
        color: #999999;
        text-align: center;
        background: #f4f4f4;
        border-radius: 11px;
      }
    }
    .zz {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      color: #999999;
      span:last-child {
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 14px;
        color: #333333;
        i {
          display: flex;
          align-items: center;
        }
      }
    }
    .dh {
      display: flex;
      align-items: center;
      color: #999999;
      span {
        display: flex;
        align-items: center;
        margin-right: 16px;
        i:last-child {
          margin-left: 10px;
          font-size: 14px;
          color: #333333;
        }
      }
      .sj-wrap {
        width: 100px;
        .sj-btn {
          width: 100%;
          height: 22px;
          font-size: 12px;
          line-height: 22px;
          color: #999999;
          text-align: center;
          cursor: pointer;
          background: #f4f4f4;
          border-radius: 4px;
        }
        .sj-default {
          height: 22px;
          line-height: 22px;
        }
      }
    }
  }
}
.user-option {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  .option-tj {
    display: flex;
    li {
      display: flex;
      flex-flow: column nowrap;
      padding: 0 60px;
      text-align: center;
      border-left: 1px solid rgb(244 244 244 / 100%);
      span:first-child {
        margin-bottom: 10px;
        font-size: 18px;
        color: #333333;
      }
      span:last-child {
        font-size: 14px;
        color: #999999;
      }
      &:last-child {
        padding-right: 30px;
      }
    }
  }
  .user-option-bottom {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
}
</style>
